﻿@model Logistics.Web.Models.Order.LocationAddressModel

@using Telerik.Web.Mvc
@using Telerik.Web.Mvc.UI
@using Nop.Core.Domain.Common

@using (Html.BeginForm("PickupAddress", "Order", FormMethod.Post))
{
    <div class="address-select-wrapper">
        <div class="address-form">
            <h2>Pickup Location</h2>
            <p>Where are you shipping from?</p>
            @if (Model.Addresses.Count > 0)
            {
                <button type="button" class="address-select btn btn-normal">Select from Saved Addresses</button>
            }
            <div class="row">
                <div class="section-wrapper">
                    @*@Html.RequiredHint()<span>= Mandatory fields</span>*@
                    <div class="location-group">
                        <div class="col-xs-12 col-sm-4">
                            @Html.RequiredHint()
                            @Html.LabelFor(model => model.Address.FirstName)
                            @Html.TextBoxFor(model => model.Address.FirstName, new { @class = "form-control" })
                        </div>

                        <div class="col-xs-12 col-sm-4">
                            @Html.RequiredHint()
                            @Html.LabelFor(model => model.Address.LastName)
                            @Html.TextBoxFor(model => model.Address.LastName, new { @class = "form-control" })
                        </div>
                    </div>

                    <div class="location-group my-location-company col-xs-12 col-sm-4">
                        @Html.LabelFor(model => model.Address.Company)
                        @Html.TextBoxFor(model => model.Address.Company, new { @class = "form-control", @placeholder = "Optional" })
                    </div>

                    <div class="col-xs-12 col-sm-6">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.Address1)
                        @Html.TextBoxFor(model => model.Address.Address1, new { @class = "form-control" })
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        @Html.LabelFor(model => model.Address.Address2)
                        @Html.TextBoxFor(model => model.Address.Address2, new { @class = "form-control", @placeholder = "Optional" })
                    </div>

                    <div class="col-xs-12 col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.City)
                        @Html.TextBoxFor(model => model.Address.City, new { @class = "form-control" })
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.StateProvinceId)
                        @Html.DropDownListFor(model => model.Address.StateProvinceId, Model.AvailableStateProvinces, new { @class = "form-control province-form" })
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        @Html.LabelFor(model => model.Address.CountryName)
                        <div class="location-display">
                            @Html.DropDownListFor(model => model.Address.CountryId, Model.AvailableCountries, new { @class = "form-control country-form" })
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.ZipPostalCode)
                        @Html.TextBoxFor(model => model.Address.ZipPostalCode, new { @class = "form-control" })
                    </div>
                    <div class="location-group col-xs-12 col-sm-4">
                        @Html.LabelFor(model => model.Address.Email)
                        @Html.TextBoxFor(model => model.Address.Email, new { @class = "form-control" })
                        @Html.HiddenFor(model => model.Address.Email)
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.CellPhoneNumber)
                        @Html.TextBoxFor(model => model.Address.CellPhoneNumber, new { @class = "form-control" })
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        @Html.LabelFor(model => model.Address.PhoneNumber)
                        @Html.TextBoxFor(model => model.Address.PhoneNumber, new { @class = "form-control", @placeholder = "Optional" })
                    </div>
                    <div class="location-group col-sm-12">
                        <div class="address-type-wrapper">
                            <table id="pickInfoTableId">
                                <tbody>
                                    @if (Model.IsAddressTypeVerified)
                                    {
                                        <tr>
                                            <td>
                                                <label>This is a </label>
                                                @Html.HiddenFor(model => model.Address.Type)
                                                @Html.HiddenFor(model => model.IsAddressTypeVerified)
                                            </td>
                                            <td><span class="lowercase">@Model.Address.Type.Value</span> location</td>
                                        </tr>
                                    }
                                    else
                                    {
                                        <tr>
                                            <td>
                                                <label>@Html.RequiredHint() This is a </label>
                                            </td>
                                            <td>@Html.RadioButtonFor(model => model.Address.Type, AddressType.Business)<label for="Address_Type">business location</label></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                @Html.RadioButtonFor(model => model.Address.Type, AddressType.Residential, new { @id = "Address_Type1" })<label for="Address_Type1">residential location</label>
                                                <div class="order-tip" data-target="residential-address">?</div><div class="popover-message"></div>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                            <div class="popover-contents">
                                <div id="residential-address" class="popover-content">
                                    <div class="title">
                                        Residential Address
                                    </div>
                                    <div class="content">
                                        <p>An additional fee of $2 per package will apply if the delivery location is a residential location. A residential location is defined as a location that is a home, including a business operating out of a home.</p>
                                        <p>For any package that is delivered to a residential location with "No Signature Required" selected, the $2 fee will be waived; however, SpotsHUB EXPRESS will only make one delivery attempt. Any package that is not picked up by the receiver within 7 days from the final delivery attempt will be returned to the sender.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="col-sm-12 pickup-time-wrapper">
                    <div class="section-wrapper">
                        <h3>Pickup Time</h3>
                        <table id="pickupTableId">
                            <tr>
                                <td>
                                    @Html.RadioButtonFor(model => model.HasPickupDate, false.ToString().ToLower())
                                    <label for="HasPickupDate">Package is ready for pickup.</label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RadioButtonFor(model => model.HasPickupDate, true.ToString().ToLower(), new { @id = "HasPickUpDate1" })
                                    <label for="HasPickUpDate1">Scehdule a pick up date and time: <span class="picked-time"></span></label>
                                </td>
                            </tr>
                        </table>
                        @if (Model.AvaliablePickupTimeWindows != null && Model.AvaliablePickupTimeWindows.Count > 0)
                        {
                            for (int i = 0; i < Model.AvaliablePickupTimeWindows.Count; i++)
                            {
                                for (int j = 0; j < Model.AvaliablePickupDates.Count; j++)
                                {
                                    if (Model.AvaliablePickupDateTimeWindows[j, i] != null && Model.AvaliablePickupDateTimeWindows[j, i].Selected)
                                    {
                                        <input type="hidden" name="PickupDate" id="PickupDate" value="@Model.AvaliablePickupDateTimeWindows[j, i].PickupDate">
                                        <input type="hidden" name="PickupTimeWindowId" id="PickupTimeWindowId" value="@Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow">
                                    }
                                }
                            }
                            <div class="pickup-calendar-wrapper">
                                <table class="pickup-calendar col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <thead id="pickupThreadId">
                                        <tr>
                                            <th></th>
                                            @foreach (var d in Model.AvaliablePickupDates)
                                            {
                                                <th class="date">@d</th>
                                            }
                                        </tr>
                                    </thead>
                                    <tbody id="pickupTbodyId">
                                        @for (int i = 0; i < Model.AvaliablePickupTimeWindows.Count; i++)
                                        {
                                            <tr>
                                                <td>@Model.AvaliablePickupTimeWindows[i]</td>
                                                @for (int j = 0; j < Model.AvaliablePickupDates.Count; j++)
                                                {
                                                    <td>
                                                        @if (Model.AvaliablePickupDateTimeWindows[j, i].CanSelect)
                                                        {
                                                            <div class="available @if (Model.AvaliablePickupDateTimeWindows[j, i].Selected)
                                                            { <text>selected</text> }" data-action="select" data-name="@Html.NameFor(model => model.PickupDate)" data-value="@Model.AvaliablePickupDateTimeWindows[j, i].PickupDate" data-name2="@Html.NameFor(model => model.PickupTimeWindowId)" data-value2="@Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow">
                                                            </div>
                                                        }
                                                        else
                                                        {
                                                            <div class="unavailable @Model.AvaliablePickupDateTimeWindows[j, i].PickupTimeWindow"></div>
                                                        }
                                                    </td>
                                                }
                                            </tr>
                                        }

                                    </tbody>
                                </table>
                                <div class="clear"></div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            @*

                <div class="clear"></div>
            *@
            <div class="col-xs-12 col-md-6 col-md-offset-3">
                <input type="button" class="btn btn-normal btn-block" data-action="submit" value="Continue" />
            </div>
            <div class="clear"></div>
        </div>
        @if (Model.Addresses.Count > 0)
        {
            <div class="address-select-list">
                <span class="step-back"><i class="fa fa-arrow-circle-o-left"></i> Back</span>
                <h2>Select Pickup Address</h2>
                <div class="address-search">
                    <table>
                        <tr><td>Search Address: </td><td><input type="text" class="form-control address-search-field" placeholder="Please enter keywords" /></td></tr>
                    </table>
                </div>
                @foreach (var address in Model.Addresses)
                {
                    <div class="address-select-item @if(address.Selected){<text>selected</text>}" data-action="submit" data-name="@Html.NameFor(model => model.SelectedAddressId)" data-value="@address.Value" data-name2="selectAddress" data-value2="true">
                        <div class="address-select-item-content">
                            @Html.Raw(address.Text)
                        </div>
                    </div>
                }
            </div>
        }
    </div>
    <script>
        $(document).ready(function () {
            checkHasPickUpDate(false);
            $("input[name=HasPickupDate]").change(function () {
                checkHasPickUpDate(true);
            });
            function checkHasPickUpDate(animation) {
                if ($("input[name=HasPickupDate]:checked").val() == "true") {
                    if (animation == true) {
                        $(".pickup-calendar-wrapper").stop().animate({ height: $(".pickup-calendar").outerHeight(true) });
                    } else {
                        $(".pickup-calendar-wrapper").css("height", "auto");
                    }
                } else {
                    if (animation == true) {
                        $(".pickup-calendar-wrapper").stop().animate({ height: 0 });
                    } else {
                        $(".pickup-calendar-wrapper").css("height", 0);
                    }
                }
            }

        });
    </script>
}

<script type="text/javascript">
    $(function () {
        //address type selected event
        addressTypeSelected();
    });

    function addressTypeSelected() {
        $('#pickInfoTableId input[type=radio]').change(function () {
            $('#pickupTableId div').removeClass('selected');
            $('#pickupThreadId').html('');
            $('#pickupTbodyId').html('');

            var addressTypeid = ($(this).val() == 'Business' ? 1 : 2);
            getPickupDaysInfo(addressTypeid);
        });
    }

    function getPickupDaysInfo(addressTypeId) {
        $.post('@Url.Action("GetPickupDateInfomation")', { addressType: addressTypeId }, function (obj) {
            if (obj == null) return;
            var data = JSON.parse(obj);
            pickupTableHead(data.AvaliablePickupDates);
            pickupTableBody(data);
        });
    }

    function pickupTableHead(headData) {
        var html = '';
        html += '<tr>';
        html += '<th></th>';
        $.each(headData, function () {
            html += '<th class="date">' + this + '</th>';
        });
        html += '</tr>';
        $('#pickupThreadId').html(html);
    }

    function pickupTableBody(data) {
        var html = '';
        for (var i = 0; i < data.AvaliablePickupTimeWindows.length; i++) {
            html += '<tr>';
            html += '<td>' + data.AvaliablePickupTimeWindows[i] + '</td>';

            for (var j = 0; j < data.AvaliablePickupDates.length; j++) {
                html += '<td>';
                if (data.AvaliablePickupDateTimeWindows[j][i].CanSelect) {
                    var isSelected = (data.AvaliablePickupDateTimeWindows[j][i].Selected) ? 'selected' : '';
                    html += '<div class="available ' + isSelected + '" data-action="select" data-name="PickupDate" data-value="' + data.AvaliablePickupDateTimeWindows[j][i].PickupDate + '" data-name2="PickupTimeWindowId" data-value2="' + data.AvaliablePickupDateTimeWindows[j][i].PickupTimeWindow + '">';
                    html += '</div>';
                } else {
                    html += '<div class="unavailable ' + data.AvaliablePickupDateTimeWindows[j][i].PickupTimeWindow + '" ></div>';
                }

                html += '</td>';
            }

            html += '</tr>';
        }

        $('#pickupTbodyId').html(html);
    }

</script>